<template>
	<view class="card order-item">
		<div class="order-item-hd flex align-center justify-between">
			<text>下单时间：{{ orderinfo.created_at }}</text>
			<view class="flex align-center">
				<text class="state">{{ orderinfo.status_ }}</text>
			</view>
		</div>
		<div class="goodslist flex  align-center " @click="orderShow(orderinfo.id)">
			<div class="imglist flex-sub flex">
				<image v-for="(item, index) in orderinfo.img_url" :key="index" :src="item[0] + '?imageView2/0/w/200'" mode="widthFix" v-if="index < 3"></image>
			</div>
			<div class="num">共 {{ orderinfo.qty }} 件 ></div>
		</div>
		<div class="order-item-ft flex align-center justify-between">
			<view class="">
				{{ orderinfo.contact_name }}：{{ orderinfo.contact_phone }}
				<div class="price">
					<text class="text-red">货位号：</text>
					<text class="text-red">{{ orderinfo.hj_num || '' }}</text>
					<template v-if="orderinfo.status == 5">
						<text class="text-grey u-m-l-10">#{{ orderinfo.order_count }}-{{ orderinfo.order_number }}</text>
					</template>
				</div>
			</view>
			<div class="btnlist flex" v-if="orderinfo.status != 10">
				<view
					class="btn "
					:class="[orderinfo.status == 3 || orderinfo.status == 4 ? 'grey' : orderinfo.order_ps_status == 1 ? '' : 'active']"
					@click="confirmPs(orderinfo.id, orderinfo.status, orderinfo.order_ps_status)"
				>
					{{ orderinfo.order_ps_status == 1 ? '取消' : '确认' }}配送
				</view>
			</div>
		</div>
	</view>
</template>

<script>
// #ifndef H5
//var wx = require('jweixin-module');
// #endif
//status 1待付款 2已过期 3待发货4备货中5待收货 10待评价
export default {
	data() {
		return {};
	},
	components: {},
	props: {
		orderinfo: {
			type: Object,
			default: {}
		},
		orderIndex: {
			type: [String, Number],
			default: 0
		}
	},
	created() {
		console.log();
	},
	methods: {
		//查看订单
		orderShow(id) {
			uni.navigateTo({
				url: '/pages/myStore/orderDetail?id=' + id
			});
		},
		//确认或者取消配送
		confirmPs(id, status, order_ps_status) {
			let $me = this;
			if (status == 5) {
				uni.showModal({
					title: '',
					content: (order_ps_status == 1 ? '取消' : '确认') + '配送？',
					success: function(res) {
						if (res.confirm) {
							$me.$postAction($me.$api.psOder + id).then(da => {
								if (da.code == 0) {
									uni.showToast({
										title: (order_ps_status == 1 ? '取消' : '确认') + '配送成功',
										icon: 'none'
									});
									$me.$emit('updateStatus', $me.orderIndex);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.mr10 {
	margin-right: 10upx;
}

.order-item {
	background: #fff;
	margin-bottom: 20upx;
	font-size: 26upx;
	font-weight: 400;
	color: #000000;

	&.card {
		border-radius: 12upx;
		border-top: none;
		padding: 0;
	}

	.state {
		color: var(--nav-bg);
	}

	.icon {
		width: 39upx;
		height: 39upx;
		margin-left: 16upx;
	}

	.text-red {
		color: #ff5e05;
		font-size: 26upx;
	}

	.order-item-hd {
		border-bottom: 1px solid #e5e5e5;
		margin: 0 22upx 0;
	}

	.order-item-ft {
		border-top: 1px solid #e5e5e5;
		margin: 0 28upx 0;
		padding: 43upx 0 41upx;
	}

	.order-item-hd,
	.order-item-ft {
		padding: 22upx 0;
	}

	.price {
		font-size: 24upx;
		font-weight: 400;
		color: #1c1c1e;

		.text-red {
			font-size: 26upx;
			font-weight: 500;
			color: #ff453a;
		}
	}

	.goodslist {
		padding: 24upx 24upx 24upx 22upx;

		.imglist {
			image {
				width: 33%;

				& + image {
					margin-left: 2%;
				}
			}
		}

		.num {
			color: #5c5c5c;
			text-align: center;
			padding: 0 0 0 12upx;
		}
	}

	.btnlist {
		.btn {
			display: block;
			color: #ff8844;
			border: 1px solid #ff8844;
			border-radius: 40upx;
			line-height: 60upx;
			height: 60upx;
			text-align: center;
			width: 150upx;
			font-size: 24upx;
			font-weight: 500;

			&.active {
				color: #fff;
				background: linear-gradient(90deg, #ff8844 0%, #ff5d03 100%);
				border: none;
				margin-left: 30upx;
			}

			&.grey {
				color: #aeaeb2;
				border: 1px solid #aeaeb2;
			}

			& + .btn {
				margin-left: 20upx;
			}
		}
	}
}
</style>
